<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-image" :src="bannerImage"/>
            <div class="banner-info">
                <div class="banner-number">
                    <span class="iconfont">&#xe63a;</span>
                    <span>{{this.galleryImages.length}}</span>
                </div>
                <div class="banner-title">{{this.sightName}}</div>
            </div>
        </div>
        <common-fade>
            <common-gallery :img-list="galleryImages" 
            v-show="isGalleryShow" @closeGallery="handleGalleryClose"></common-gallery>
        </common-fade>
    </div>
</template>
<script>
import CommonGallery from 'comm/gallery/Gallery'
import CommonFade from 'common/fade/Fade'
export default {
    name:'DetailBanner',
    props:{
        sightName:String,
        bannerImage:String,
        galleryImages:Array
    },
    components:{
        'common-fade':CommonFade,
        'common-gallery':CommonGallery
    },
    data(){
        return{
            isGalleryShow:false
        }
    },
    methods:{
        handleBannerClick(){
            this.GalleryShow = true;
        },
        handleGalleryClose(){
            this.isGalleryShow = false;
        }
    }
}
</script>
<style lang="stylus" scoped>
.banner{
    position:absolute;
    width:100%;
    height:0;
    padding-bottom:55%;
}

</style>